CSS - 浮动

发表于   |   分类于   |  

float 属性可以让元素显示在任意的问题，下面是 float 的几个常用值：

值 描述
left 左浮动
right 右浮动
none 无浮动
inherit 继承浮动

float 属性最初被设计出来，是为了解决图片的排版问题，也就是让文字环绕着图片。

浮动的原因和副作用

CSS 的定位有 3 种机制：

  • 标准流，也叫做普通流；
  • 定位；
  • 浮动；

浮动这种方式元素脱离了文档的标准流，但也会影响它周围的元素。浮动的元素不再占有原始的空间，转而占有其他的空间，这会导致父元素无法检测子元素的高度，从而出现父元素塌陷的问题，父元素的塌陷又导致依赖这个父元素布局的元素被浮动元素所遮挡，那么这样的问题如何解决呢？

解决浮动副作用

我们知道浮动带来的主要问题是父元素的塌陷，这个问题可以通过以下几种方案解决：

  • 手动给父元素添加高度；
  • 通过 clear 清除内部和外部浮动；
  • 给父元素添加 overflow 属性并结合 zoom:1 使用；
  • 给父元素添加浮动。

手动给父元素添加高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .per {
      width: 500px;
      border: 1px solid #000;
      /*手动设置高度，解决父元素塌陷*/
      height: 32px;
    }
    .test {
      width: 100px;
      height: 30px;
      background-color: red;
      border: 1px solid #fff;
      float: left;
    }
  </style>
</head>
<body>
  <div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>
</body>
</html>

以上就是通过手动设定父元素高度来解决塌陷，但这种解决方法不是很好，首先我们要确定子元素高度，其次，如果子元素很多，宽度不够导致子元素换行，父元素的高度就又不够了。

clear 属性

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为设置了 clear 属性的元素增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。对于 CSS 的清除浮动 clear，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。clear 属性有以下几个常用的值：

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .per {
      width: 200px;
      border: 1px solid #000;
    }
    .div1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }
    .div2 {
      width: 120px;
      height: 120px;
      background-color: blue;
      /*使用 clear 属性，解决父元素塌陷*/
      clear: both;
    }
  </style>
</head>
<body>
  <div class="per">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</body>
</html>

overflow 和 zoom

overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。这个属性有以下几个常用的值：

1
2
3
4
5
6
7
8
9
visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。

zoom 则是 IE 浏览器专用的一个属性。它可以根据子元素的总体高度来放大缩小父元素的高度。这种方法同样不是很完美，如果子元素宽度超过父元素，overflow 属性会导致子元素的部分内容不可见。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .per {
      width: 500px;
      border: 1px solid #000;
      /*使用 overflow 和 zoom 属性，解决父元素塌陷*/
      overflow: hidden;
      zoom: 1;
    }
    .test {
      width: 100px;
      height: 30px;
      background-color: red;
      border: 1px solid #fff;
      float: left;
    }
  </style>
</head>
<body>
  <div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>
</body>

给父元素添加浮动

给父元素添加 float 属性后，父元素和子元素相当于在同一个流里，所以自然子元素会撑开父元素，因此父元素就不再塌陷，但是这会导致父元素的兄弟元素收到影响，那么如何解决呢？我们可以给父元素的兄弟元素添加 clear 属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .per {
      width: 500px;
      border: 1px solid #000;
      float: left;
    }
    .bro {
      width: 100px;
      height: 100px;
      background-color: blue;
      clear: both;
    }
    .test {
      width: 100px;
      height: 30px;
      background-color: red;
      border: 1px solid #fff;
      float: left;
    }
  </style>
</head>
<body>
  <div class="per">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>
  <div class="bro">
  </div>
</body>
</html>